import type { ComputedRef, Ref } from 'vue';
import type { FormSchema, FormActions, FormProps } from '../types/form';

import { unref, nextTick, watchEffect } from 'vue';

interface UseAutoFocusContext {
    getSchemas: ComputedRef<FormSchema[]>;
    getProps: ComputedRef<FormProps>;
    isInitedDefault: Ref<boolean>;
    formElRef: Ref<FormActions>;
}
export async function useAutoFocus({
    getSchemas,
    getProps,
    formElRef,
    isInitedDefault,
}: UseAutoFocusContext) {
    watchEffect(async () => {
        if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) {
            return;
        }
        await nextTick();
        const schemas = unref(getSchemas);  //总是反复用这个函数感觉会影响性能吧
        const formEl = unref(formElRef);
        const el = (formEl as any)?.$el as HTMLElement;
        if (!formEl || !el || !schemas || schemas.length === 0) {
            return;
        }

        const firstItem = schemas[0];
        // Only open when the first form item is input type
        if (!firstItem.component.includes('Input')) {
            return;
        }

        const inputEl = el.querySelector('.ant-row:first-child input') as Nullable<HTMLInputElement>;
        if (!inputEl) return;
        inputEl?.focus();       //这个是直接操控的dom对象focus函数
    });
}
